//拓展菜单
import { IButtonMenu, IDomEditor, IModalMenu, SlateNode } from '@wangeditor/editor'
import printJS from 'print-js'
function previewHtml(content) {
    // 创建一个新的浏览器窗口
    const previewWindow = window.open('', '', 'width=800,height=600');

    // 写入 HTML 内容到新窗口
    previewWindow.document.write('<html><head><title>预览</title></head><body>');
    previewWindow.document.write(content);
    previewWindow.document.write('</body></html>');

    // 关闭文档流
    previewWindow.document.close();

    // 让新窗口获得焦点
    previewWindow.focus();
}


// class MyButtonMenu implements IButtonMenu {   // TS 语法
class PrintButtonMenu {                       // JS 语法

    constructor() {
        this.title = '打印模板' // 自定义菜单标题
        this.iconSvg = '<svg t="1726040887215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1520" width="200" height="200"><path d="M928 298.666667h-160V138.666667a53.393333 53.393333 0 0 0-53.333333-53.333334H309.333333a53.393333 53.393333 0 0 0-53.333333 53.333334v160H96a53.393333 53.393333 0 0 0-53.333333 53.333333v362.666667a53.393333 53.393333 0 0 0 53.333333 53.333333h160v160a53.393333 53.393333 0 0 0 53.333333 53.333333h405.333334a53.393333 53.393333 0 0 0 53.333333-53.333333v-160h160a53.393333 53.393333 0 0 0 53.333333-53.333333V352a53.393333 53.393333 0 0 0-53.333333-53.333333zM298.666667 138.666667a10.666667 10.666667 0 0 1 10.666666-10.666667h405.333334a10.666667 10.666667 0 0 1 10.666666 10.666667v160H298.666667z m426.666666 789.333333a10.666667 10.666667 0 0 1-10.666666 10.666667H309.333333a10.666667 10.666667 0 0 1-10.666666-10.666667V640h426.666666z m213.333334-213.333333a10.666667 10.666667 0 0 1-10.666667 10.666666h-160V640h64a21.333333 21.333333 0 0 0 0-42.666667H192a21.333333 21.333333 0 0 0 0 42.666667h64v85.333333H96a10.666667 10.666667 0 0 1-10.666667-10.666666V352a10.666667 10.666667 0 0 1 10.666667-10.666667h832a10.666667 10.666667 0 0 1 10.666667 10.666667z m-42.666667-309.333334a21.333333 21.333333 0 1 1-21.333333-21.333333 21.333333 21.333333 0 0 1 21.333333 21.333333z m-213.333333 298.666667a21.333333 21.333333 0 0 1-21.333334 21.333333H362.666667a21.333333 21.333333 0 0 1 0-42.666666h298.666666a21.333333 21.333333 0 0 1 21.333334 21.333333z m0 128a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1 0-42.666666h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333z m-128 0a21.333333 21.333333 0 0 1-21.333334 21.333333H362.666667a21.333333 21.333333 0 0 1 0-42.666666h170.666666a21.333333 21.333333 0 0 1 21.333334 21.333333z" fill="#5C5C66" p-id="1521"></path></svg>' // 可选
        this.tag = 'button'
    }

    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    // getValue(editor: IDomEditor): string | boolean {   // TS 语法
    getValue(editor) {                              // JS 语法
        return editor.getHtml()
    }

    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    // isActive(editor: IDomEditor): boolean {  // TS 语法
    isActive(editor) {                    // JS 语法
        return false
    }

    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    // isDisabled(editor: IDomEditor): boolean {   // TS 语法
    isDisabled(editor) {                     // JS 语法
        return false
    }

    // 点击菜单时触发的函数
    // exec(editor: IDomEditor, value: string | boolean) {   // TS 语法
    exec(editor, value) {                              // JS 语法
        if (this.isDisabled(editor)) return
        this.printTemplate(value) // value 即 this.value(editor) 的返回值
    }

    printTemplate(value) {
        // 使用 print-js 打印富文本编辑器的内容
        printJS({
            printable: value, // 要打印的元素的 ID
            // printable: 'printable-content', // 要打印的元素的 ID
            type: 'raw-html', // 打印内容的类型
            header: '打印模板', // 打印页眉
            targetStyles: ['*'], // 包括所有样式
            style: `
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                th, td {
                    border: 1px solid #000;
                    padding: 8px;
                    text-align: center;
                }
                th {
                    background-color: #f2f2f2;
                    color: #333;
                    font-weight: bold;
                }
                td {
                    background-color: #fff;
                }
            `, // 自定义表格样式
            documentTitle: '打印内容', // 打印文档的标题
        });
    }

}

// class MyButtonMenu implements IButtonMenu {   // TS 语法
class PreviewButtonMenu {                       // JS 语法

    constructor() {
        this.title = '预览模板' // 自定义菜单标题
        this.iconSvg = '<svg t="1726042121189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="200" height="200"><path d="M512.737804 743.56089c239.125169 0 352.993566-182.187389 381.457852-233.428424-34.156938-51.240011-167.954223-236.278331-381.457852-236.278331-241.96689 2.849908-361.52794 190.730972-387.146411 236.278331C148.363026 558.526663 247.998257 743.56089 512.737804 743.56089M512.737804 772.026198c-321.673234 0-418.461627-261.893732-418.461627-261.893732s125.252679-261.897825 418.461627-261.897825c264.74364 0 415.619906 261.897825 415.619906 261.897825S805.949822 772.026198 512.737804 772.026198L512.737804 772.026198 512.737804 772.026198 512.737804 772.026198zM512.737804 772.026198" fill="#272636" p-id="2535"></path><path d="M512.737804 624.000863c62.630433 0 113.868397-51.241035 113.868397-113.868397s-51.236941-113.868397-113.868397-113.868397c-62.626339 0-113.867374 51.241035-113.867374 113.868397S450.110441 624.000863 512.737804 624.000863M512.737804 652.464125c-79.70532 0-142.332682-62.626339-142.332682-142.332682 0-79.709413 62.626339-142.336776 142.332682-142.336776 79.709413 0 142.336776 62.626339 142.336776 142.336776C655.073556 589.837786 592.447217 652.464125 512.737804 652.464125L512.737804 652.464125 512.737804 652.464125 512.737804 652.464125zM512.737804 652.464125" fill="#272636" p-id="2536"></path></svg>'
        this.tag = 'button'
    }

    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    // getValue(editor: IDomEditor): string | boolean {   // TS 语法
    getValue(editor) {                              // JS 语法
        return editor.getHtml()
    }

    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    // isActive(editor: IDomEditor): boolean {  // TS 语法
    isActive(editor) {                    // JS 语法
        return false
    }

    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    // isDisabled(editor: IDomEditor): boolean {   // TS 语法
    isDisabled(editor) {                     // JS 语法
        return false
    }

    // 点击菜单时触发的函数
    // exec(editor: IDomEditor, value: string | boolean) {   // TS 语法
    exec(editor, value) {                              // JS 语法
        if (this.isDisabled(editor)) return
        // 为预览窗口中的 HTML 添加样式
        var styledHtml = `
         <style>
             table {
                 width: 100%;
                 border-collapse: collapse;
             }
             th, td {
                 border: 1px solid #000;
                 padding: 8px;
                 text-align: center;
             }
             th {
                 background-color: #f2f2f2;
                 color: #333;
                 font-weight: bold;
             }
             td {
                 background-color: #fff;
             }
         </style>
         ${value}
     `;
        previewHtml(styledHtml);
    }



}



export const printConf = {
    key: 'print', // 定义 menu key ：要保证唯一、不重复（重要）
    factory() {
        return new PrintButtonMenu() // 把 `YourMenuClass` 替换为你菜单的 class
    },
}
export const previewConf = {
    key: 'preview', // 定义 menu key ：要保证唯一、不重复（重要）
    factory() {
        return new PreviewButtonMenu() // 把 `YourMenuClass` 替换为你菜单的 class
    },
}



